<template>
	<view class="columnbox wdh-100 content">
		<view class="rowbox wdh-100 tab-box">
			<view @click="changeType(index)" class="columnbox one-tab" :class="{'sel-tab':index==curtab}"
				v-for="(item,index) in tabList" :key='index'>{{item.name}}
				<view v-if="curtab==index" class="tab-line"></view>
			</view>
		</view>
		<!-- 普通会员 -->
		<template v-if="curtab==0">
			<view class="rowbox vip-card-img-box">
				<image src="http://mkxd-app.oss-cn-beijing.aliyuncs.com/eaa1ef0c50334a54a3d399d15a75f158.png"
					mode="aspectFill" class="vip-card-img-bg"></image>
				<view class="rowbox spb vip-card-img-content spb als">
					<view class="columnbox als">
						<view class="vip-name">普通会员</view>
						<view class="vip-desc">普通权益</view>
						<view class="vip-jiesuo">已解锁</view>
					</view>
					<image src="http://mkxd-app.oss-cn-beijing.aliyuncs.com/809fb5fcba444868a389fa097807163e.png"
						mode="widthFix" class="vip-card-vip"></image>
				</view>
			</view>
			<!-- 权益 -->
			<view class="columnbox wdh-100 qy-box">
				<image src="/static/img/vip-qy.png" mode="widthFix" class="qy-img"></image>
				<view class="rowbox qy-title">
					<view class="qy-line"></view>
					会员权益
					<view class="qy-line-r"></view>
				</view>
			</view>
			<view class="one-qy rowbox spb" v-for="(item,index) in packageInfo.equities" :key='index'>
				<!-- <view class="one-qy-desc">{{item.title}}</view> -->
				<view class="one-qy-desc">{{item.content}}</view>
				<!-- <view class="one-qy-desc">
					{{item.content}}
				</view> -->
				<view class="rowbox qy-btn">{{item.btnName|| '去洗车'}}</view>
			</view>
		</template>
		<!-- vip会员 -->
		<template v-else-if="curtab==1">
			<view class="rowbox vip-card-img-box">
				<image src="http://mkxd-app.oss-cn-beijing.aliyuncs.com/6564208f5d55478a81ecf63fc7c2baf0.png"
					mode="aspectFill" class="vip-card-img-bg"></image>
				<view v-if="userRole<1" class="rowbox spb vip-card-img-content spb als">
					<view class="columnbox als">
						<view class="vip-name">VIP会员</view>
						<view class="vip-desc">立即开通会员，尊享更多特权</view>
						<view class="vip-zengsong">赠送价值29.8元的挪车码一套</view>
						<view class="vip-jiesuo" style="margin-top: 32rpx;">未解锁</view>
					</view>
					<image src="http://mkxd-app.oss-cn-beijing.aliyuncs.com/2ee82075570643f8a66f2b4fcaf1265a.png"
						mode="widthFix" class="vip-card-vip" style="width: 198rpx;margin-top: 10rpx;"></image>
				</view>
				<view v-else class="rowbox spb vip-card-img-content spb als">
					<view class="columnbox als">
						<view class="vip-name">VIP会员</view>
						<view class="vip-desc">尊享4大权益</view>
						<view class="vip-jiesuo">已解锁</view>
					</view>
					<image src="http://mkxd-app.oss-cn-beijing.aliyuncs.com/5c662c33f98e4e988aa08848f4f6e053.png"
						mode="widthFix" class="vip-card-vip"></image>
				</view>
			</view>
			<!-- 权益 -->
			<view class="columnbox wdh-100 qy-box">
				<image src="/static/img/vip-qy.png" mode="widthFix" class="qy-img"></image>
				<view class="rowbox qy-title">
					<view class="qy-line"></view>
					会员权益
					<view class="qy-line-r"></view>
				</view>
			</view>
			<view class="one-qy rowbox spb" v-for="(item,index) in packageInfo.equities" :key='index'>
				<view class="fn_ones display  displayColumn displaycenter_jus" style="flex-wrap: wrap;white-space: normal;max-width:490rpx; ">
					<view class="one-qy-desc">{{item.title}}</view>
					
				<span class="ones_ssd" style="margin-top: 12rpx;">{{item.content}}</span>
					
				</view>
				<view class="rowbox qy-btn" v-if="memberType>0 && memberType<=2">{{item.btnName || '去洗车'}}</view>
			</view>
			<template v-if="userRole<1">
				<view style="width: 100%;height: 200rpx;"></view>
				<view class="rowbox wdh-100 bottom-box spb">
					<view class="kt-price">¥{{packageInfo.price}}</view>
					<view class="rowbox kt-btn" @click="toBuy">开通会员</view>
					<!-- <view class="rowbox vip-btn" @click="upgradeflag=true">￥99 开通会员</view> -->
					<!-- 	<view class="rowbox wdh-100 document-box">
					<view class="rowbox circle-box"></view>
					<view>我已阅读并同意<text>《摩卡洗车会员协议》</text></view>
				</view> -->
				</view>
			</template>
		</template>
		<template v-else>
			<view class="rowbox vip-card-img-box">
				<image src="http://mkxd-app.oss-cn-beijing.aliyuncs.com/a4d230b83034401bbcc088203acb0de5.png"
					mode="aspectFill" class="vip-card-img-bg"></image>
				<view v-if="userRole<2" class="rowbox spb vip-card-img-content spb als">
					<view class="columnbox als">
						<view class="vip-name">SVIP会员</view>
						<view class="vip-desc">立即开通会员，尊享更多特权</view>
						<view class="vip-zengsong" style="width: 300rpx;">赠送价值29.8元的挪车码二套+ETC设备一套</view>
						<view class="vip-jiesuo" style="margin-top: 10rpx;">未解锁</view>
					</view>
					<image src="http://mkxd-app.oss-cn-beijing.aliyuncs.com/2ee82075570643f8a66f2b4fcaf1265a.png"
						mode="widthFix" class="vip-card-vip" style="width: 198rpx;margin-top: 10rpx;"></image>
				</view>
				<view v-else class="rowbox spb vip-card-img-content spb als">
					<view class="columnbox als">
						<view class="vip-name">SVIP会员</view>
						<view class="vip-desc">尊享十二大权益</view>
						<view class="vip-jiesuo">已解锁</view>
					</view>
					<image src="http://mkxd-app.oss-cn-beijing.aliyuncs.com/0e3989679c30444a8c4e5fe0b4b49f19.png"
						mode="widthFix" class="vip-card-vip"></image>
				</view>
			</view>
			<!-- 会员卡 -->
			<!-- 权益 -->
			<view class="columnbox wdh-100 qy-box">
				<image src="/static/img/vip-qy.png" mode="widthFix" class="qy-img"></image>
				<view class="rowbox qy-title">
					<view class="qy-line"></view>
					会员权益
					<view class="qy-line-r"></view>
				</view>
			</view>
			<view class="one-qy rowbox spb" v-for="(item,index) in packageInfo.equities" :key='index'>
				<view class="fn_ones display  displayColumn displaycenter_jus" style="flex-wrap: wrap;white-space: normal;max-width:490rpx; ">
				<view class="one-qy-desc">{{item.title}}</view>
				<span class="ones_ssd" style="margin-top: 12rpx;">{{item.content}}</span>
				</view>
				<view class="rowbox qy-btn" v-if="memberType==2&&item.btnName">{{item.btnName}}</view>
			</view>
			<template v-if="userRole<2">
				<view style="width: 100%;height: 200rpx;"></view>
				<view class="rowbox wdh-100 bottom-box spb">
					<view class="kt-price">¥{{packageInfo.price}}</view>
					<view class="rowbox kt-btn" @click="toBuy">开通会员</view>
					<!-- <view class="rowbox vip-btn" @click="upgradeflag=true">￥99 开通会员</view> -->
					<!-- 	<view class="rowbox wdh-100 document-box">
					<view class="rowbox circle-box"></view>
					<view>我已阅读并同意<text>《摩卡洗车会员协议》</text></view>
				</view> -->
				</view>
			</template>
		</template>
		<view class="columnbox upgrade-box" v-if="upgradeflag">
			<view class="columnbox upgrade-info">
				<image class="upgrade-img" src="/static/img/upgrade.png" mode="widthFix"></image>
				<view class="upgrade-title">恭喜升级啦</view>
				<view class="upgrade-desc">您可享受更丰富的会员权益，快去看看吧~</view>
				<view class="rowbox upgrade-btn" @click="upgradeflag=false">我知道了</view>
			</view>
			<image @click="upgradeflag=false" src="/static/img/close.png" mode="widthFix"
				style="width: 70rpx;height: 70rpx;margin-top: 40rpx;">
			</image>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabList: [{
						name: '普通会员'
					},
					{
						name: 'VIP会员'
					},
					{
						name: 'SVIP会员'
					}
				],
				memberType:null,
				curtab: 0,
				vipflag: false, //VIP会员
				svipflag: false, //svip会员
				upgradeflag: false,
				packageInfo: null, //套餐信息
				submitflag: false,
				userRole: 0, //用户当前身份
			};
		},
		onLoad() {
			this.getUserRole()
			this.getIsVip()
		},
		methods: {
			getIsVip(){
				
					this.$req.get('/xcx/userMember').then(res=>{
						console.log(res)
						if(res.data.code==200){
							this.memberType = res.data.data.memberType
							
						}else{
							this.$modal.msg(res.data.msg);
						}
					})
				
			},
			changeType(index) {
				this.curtab = index
				this.getList()
			},
			getList() {
				this.$req.get(`/xcx/memberCombo/list/${this.curtab}`).then(res => {
					this.packageInfo = res.data.data
					console.log(this.packageInfo)
				})
			},
			toBuy() {
				this.$req.post('/pay/member', {
					comboId: this.packageInfo.id
				}).then(res => {
					if (res.data.code == 200) {
						var info = res.data.data
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: info.timeStamp + '',
							nonceStr: info.nonceStr,
							package: info.packages,
							signType: info.signType,
							paySign: info.paySign,
							success: res => {
								this.getUserRole()
								uni.showToast({
									title: '支付成功'
								})
							},
							fail: (err) => {
								this.submitflag = false
								uni.hideLoading()
							},
							complete() {
								this.submitflag = false
								uni.hideLoading()
							}
						});
					} else {
						this.submitflag = false
						uni.hideLoading()
						uni.showModal({
							title: '下单失败',
							content: res.data.msg
						})
					}
				})
			},
			getUserRole() {
				this.$req.get('/xcx/userMember').then(res => {
					this.curtab = parseInt(res.data.data.memberType)
					this.userRole = parseInt(res.data.data.memberType)
					this.getList()
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		font-family: PingFang SC;
		background: #101010;
		min-height: 100vh;
		justify-content: flex-start;
	}
.ones_ssd{
	font-weight: 400;
	font-size: 24rpx;
	color: #FCF0E6;
	width: 490rpx;
}
	.tab-box {
		background: #101010;
		padding-bottom: 10rpx;

		.one-tab {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #72778A;
			width: 200rpx;
			position: relative;
		}

		.sel-tab {
			font-family: PingFang SC, PingFang SC;
			font-weight: 800;
			font-size: 32rpx;
			color: #FFFFFF;
		}

		.tab-line {
			width: 56rpx;
			height: 8rpx;
			background: #E7AA80;
			border-radius: 6rpx;
		}
	}

	.v-card-box {
		margin-top: 40rpx;
		width: 690rpx;
		background: linear-gradient(124.98deg, rgba(64, 64, 71, 1) 6.8%, rgba(42, 41, 46, 1) 50.69%, rgba(43, 42, 47, 1) 92.86%);
		box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.6);
		border-radius: 20rpx;
		justify-content: flex-start;
		overflow: hidden;

		.vip-card-info {
			padding: 0 40rpx;
			margin-top: 20rpx;
			position: relative;
			height: 200rpx;
		}

		.vip-card-img {
			width: 190rpx;
			height: 300rpx;
			position: absolute;
			right: 40rpx;
		}

		.vip-pt {
			font-size: 50rpx;
			color: #BBBBBB;
			font-weight: bold;
		}

		.vip-pt-desc {
			color: #BBBBBB;
			font-size: 26rpx;
			margin-top: 10rpx;
		}

		.vip-box-bottom {
			border-top: 1px solid rgba(255, 255, 255, 0.08);
			background: linear-gradient(124.87deg, rgba(52, 52, 61, 1) 10.45%, rgba(34, 33, 38, 1) 61.74%, rgba(45, 44, 50, 1) 98.37%);
			padding: 20rpx 40rpx;
			font-size: 28rpx;
			color: #BBBBBB;
		}

		.vip--gift {
			font-size: 28rpx;
			color: #FFC144;
			margin-top: 10rpx;
			position: relative;
			z-index: 2;
		}
	}

	.qy-box {
		margin-top: 40rpx;
		margin-bottom: 40rpx;

		.qy-img {
			width: 270rpx;
		}

		.qy-title {
			color: #F4BEA0;
			font-weight: bold;
			font-size: 32rpx;
			margin-top: -40rpx;
			line-height: 40rpx;
		}

		.qy-line,
		.qy-line-r {
			width: 53rpx;
			height: 2px;
			line-height: 20rpx;
			border-radius: 20px 0px 0px 20px;
			margin: 0 40rpx;
			background: linear-gradient(-89.56deg, #F4BEA0 7.08%, rgba(28, 28, 30, 0) 97.79%);
		}

		.qy-line-r {
			border-radius: 20px 0px 0px 20px;
			background: linear-gradient(89.56deg, #F4BEA0 7.08%, rgba(28, 28, 30, 0) 97.79%);
		}

	}

	.one-qy {
		background: #292A33;
		border-radius: 16rpx;
		width: 690rpx;
		border-radius: 20rpx;
		padding: 34rpx 24rpx;
		margin-bottom: 20rpx;
		font-size: 28rpx;
		color: #FFE4AD;

		.qy-btn {
			width: 136rpx;
			height: 54rpx;
			background: linear-gradient(138deg, #FBE3C8 0%, #F6D0AE 100%);
			border-radius: 44rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 800;
			font-size: 24rpx;
			color: #371901;
		}

		.one-qy-desc {
			width: 450rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #FFE0BF;
			
		}
	}

	.bottom-box {
		height: 130rpx;
		background: #353641;
		padding: 10rpx 40rpx;
		padding-bottom: 40rpx;
		position: fixed;
		bottom: 0;
		left: 0;

		.vip-btn {
			font-size: 36rpx;
			color: #fff;
			background: linear-gradient(-86.62deg, rgba(255, 148, 0, 1) 12.79%, rgba(255, 180, 28, 1) 96.27%);
			width: 600rpx;
			height: 100rpx;
			border-radius: 100rpx;
		}

		.document-box {
			margin-top: 20rpx;
			font-size: 28rpx;
			color: #fff;

			text {
				color: #FFBD38;
			}

			.circle-box {
				border: #fff solid 2rpx;
				width: 28rpx;
				height: 28rpx;
				border-radius: 100rpx;
				margin-right: 20rpx;
			}
		}
	}

	.upgrade-box {
		position: fixed;
		width: 100%;
		height: 100vh;
		top: 0;
		left: 0;
		background: rgba(#000, .7);
		z-index: 9;

		.upgrade-info {
			width: 600rpx;
			padding: 40rpx 40rpx;
			border-radius: 20rpx;
			background: linear-gradient(180.57deg, rgba(255, 231, 197, 1) 0.49%, rgba(255, 255, 255, 1) 70.11%);
		}

		.upgrade-img {
			width: 200rpx;
			height: 200rpx;
		}

		.upgrade-title {
			font-size: 40rpx;
			color: #FF9400;
			font-weight: bold;
			margin-top: 20rpx;
		}

		.upgrade-desc {
			font-size: 28rpx;
			color: #868686;
			margin-top: 20rpx;
			width: 360rpx;
			text-align: center
		}

		.upgrade-btn {
			background: linear-gradient(-86.62deg, rgba(255, 148, 0, 1) 12.79%, rgba(255, 180, 28, 1) 96.27%);
			color: #fff;
			font-size: 28rpx;
			width: 400rpx;
			height: 90rpx;
			border-radius: 100rpx;
			margin-top: 40rpx;
		}
	}

	.vip-card-img-box {
		width: 670rpx;
		height: 300rpx;
		border-radius: 24rpx;
		margin-top: 38rpx;
		position: relative;

		.vip-card-img-bg {
			width: 670rpx;
			height: 300rpx;
			border-radius: 24rpx;
		}

		.vip-card-img-content {
			position: absolute;
			left: 0;
			top: 0;
			width: 670rpx;
			height: 300rpx;
			padding: 20rpx 50rpx;
		}

		.vip-card-vip {
			width: 264rpx;
			height: 260rpx;
		}

		.vip-name {
			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			font-size: 40rpx;
			color: #5A3C27;
			margin-top: 28rpx;
		}

		.vip-desc {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #5A3C27;
			margin-top: 8rpx;
		}

		.vip-zengsong {
			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			font-size: 24rpx;
			margin-top: 20rpx;
			color: #17698F;
		}

		.vip-jiesuo {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #000000;
			margin-top: 70rpx;
		}
	}

	.kt-price {
		font-family: DIN, DIN;
		font-weight: bold;
		font-size: 52rpx;
		line-height: 61rpx;
		color: #F4BEA0;
	}

	.kt-btn {
		width: 304rpx;
		height: 88rpx;
		background: linear-gradient(138deg, #FBE3C8 0%, #F6D0AE 100%);
		border-radius: 44rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 800;
		font-size: 28rpx;
		color: #371901;
	}
</style>